// 页面加载完成
window.addEventListener("load", function () {
    //轮播图插件
    var mySwiper = new Swiper(".swiper", {
        autoplay: true,
        pagination: {
            el: ".swiper-pagination",
        },
    });

    // 云服务
    // 模拟后台数据
    // tltle："为开发者提供云服务",
    const servetextDate = {
        title: "为开发者提供云服务",
        test: "基于API技术向客户提供多领域、多场景的Sass服务；助力开发者提高生产效率，加快工作进程",
        more: "探索云服务",
        lis: [{
            imgs: "./imgs/service01.svg",
            title: "API私有化服务",
            Text: "可部署本地&专有云的Web API",
            more: "去搜索",
        },
        {
            imgs: "./imgs/service01.svg",
            title: "API私有化服务",
            Text: "可部署本地&专有云的Web API",
            more: "去搜索",
        },
        {
            imgs: "./imgs/service01.svg",
            title: "API私有化服务",
            Text: "可部署本地&专有云的Web API",
            more: "去搜索",
        },
        {
            imgs: "./imgs/service01.svg",
            title: "API私有化服务",
            Text: "可部署本地&专有云的Web API",
            more: "去搜索",
        },
        ]
    }
    // console.log($('div'));
    // 功能一：动态渲染大标题
    // 获取对应节点
    const containerNode = $("#serve .container .servetext");
    // console.log(containerNode);
    // 动态渲染大标题
    let titleHtml = `
      <div class="servetext">
      <h1 class="h3general">${servetextDate.title}</h1>
      <p class="pgeneral">${servetextDate.test}</p>
      <a class="ageneral" href="">${servetextDate.more}></a>
      </div>
`;
    // 动态渲染卡片区
    // 将拼接好的hml机构放入对应标签
    containerNode.innerHTML = titleHtml;

    // 功能二把li渲染到ul里
    // 获取对应节点
    let list = $('#serve #serveBox')
    // 拼接html
    let html = ""
    // 把servetextDate遍历数据,把遍历好的数据赋值给html
    servetextDate.lis.forEach(function (v) {
        // console.log(v);
        // console.log(servetextDate);
        html += `
        <li>
        <img src="${v.imgs}" alt="">
        <h2 class="f20 plr1">${v.title}</h2>
        <p class="f12-1 plr2">${v.Text}</p>
        <a class="f12-1 clb plr3" href="">${v.more}</a>
        </li>
        `
    })
    //将html放入指定的结构
    list.innerHTML = html;





    // api服务
    const apitDate = {
        title: " 海量的API服务，丰富的API分类",
        test: "提供400多种API和数据块，快捷、易用、稳定，极大的满足了用户数据需求；节省了寻找时间，节约了数据维护的服务器和人力成本。",
        more: "探索API >",
        list: [{
            imgs: "./imgs/api01.svg",
            Text: "生活服务",
        },
        {
            imgs: "./imgs/api02.svg",
            Text: "金融科技",
        },
        {
            imgs: "./imgs/api03.svg",
            Text: "交通地理",
        },
        {
            imgs: "./imgs/api04.svg",
            Text: "充值缴费",
        },
        {
            imgs: "./imgs/api05.svg",
            Text: "企业工商",
        },
        {
            imgs: "./imgs/api01.svg",
            Text: "应用开发",
        },
        {
            imgs: "./imgs/api02.svg",
            Text: "电子商务",
        },
        {
            imgs: "./imgs/api03.svg",
            Text: "生活服务",
        },
        {
            imgs: "./imgs/api04.svg",
            Text: "吃喝玩乐",
        },
        {
            imgs: "./imgs/api05.svg",
            Text: "文娱视频",
        },

        ]
    }
    const aipNode = $(".classify .container .classifytext");
    // console.log(containerNode);
    // 动态渲染大标题
    let apiHtml = `
  <div class="servetext">
  <h1 class="h3general">${apitDate.title}</h1>
  <p class="pgeneral">${apitDate.test}</p>
  <a class="ageneral" href="">${apitDate.more}></a>
  </div>
`;
    // 动态渲染卡片区
    // 将拼接好的hml机构放入对应标签
    aipNode.innerHTML = apiHtml;

    // 动态渲染卡片区
    // 将拼接好的hml机构放入对应标签

    // 功能二把li渲染到ul里
    // 获取对应节点
    let lis = $('.classify .classifylayout')
    console.log(lis);
    // 拼接html
    let apihtml = "";
    // // 把遍历数据,把遍历好的数据赋值给html
    apitDate.list.forEach(function (v) {
        console.log(v);
        apihtml += `
        <li>
        <img class="" src="${v.imgs}" alt="">
        <p>${v.Text}</p>
        </li>
        `
    })
    lis.innerHTML = apihtml;
    // let clli = $('.classifylayout li')
    // console.log(clli);

    // 移入效果
    let oldImgUrl = null; // 使用全局变量存储老的图片路径
    $('.classifylayout li').forEach(function (v) {
        v.addEventListener("mouseover", function () {
            console.log("移入");
            this.style.background = "blue"
            this.style.color = "#fff"
            // 3-3.将图片换为白色的图片
            // 原来的 api01.svg
            // 现在的 api01-c.svg
            // console.log("我是谁", this.children[0], this.firstElementChild);
            oldImgUrl = this.children[0].src;
            console.log(this.children[0].src);
            // 方式一，用replace
            this.children[0].src = this.children[0].src.replace(".svg", "-c.svg");
        })
        // 移出效果
        v.addEventListener("mouseout", function () {
            console.log("移出");
            this.style.background = "#fff"
            this.style.color = "black"
            this.children[0].src = oldImgUrl;
        })
    })
    // 独角兽区域
    let index = -1;
	// 1.周期定时器，每隔2s显示一个轮播区域
	this.window.setInterval(function () {
		// 2.获取到轮播区域的节点
		// $("#unicornCont .container");
		// 3.排他思想，先将所有的轮播区域设置为none
		$("#unicornCont .container").forEach(function (v) {
			v.style.display = "none";
		});
		// 4.让对应的轮播区域显示，默认显示第0个轮播区域
		$("#unicornCont").children[++index].style.display = "block";
		// 5.当所有的轮播区域播放完时，让索引重置
		if (index >= $("#unicornCont").children.length - 1) {
			index = -1;
		}
	}, 2000);

});

